<template>
  <WidgetContainer :widget-id="config.id">
    <FormItemWidget :config="config" :rowIndex="rowIndex" :parentId="parentId">
      <el-upload :action="uploadApi" :headers="requestHeaders" :limit="config.attributes.limit"
        :accept="config.attributes.accept" :disabled="config.attributes.disabled"
        :list-type="config.attributes.listType || 'picture-card'" :file-list="fieldValue" :on-preview="handlePreview"
        :on-remove="handleRemove" :on-success="handleSuccess" @change="handleChange" :class="uploadClass">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
    </FormItemWidget>
  </WidgetContainer>
  <el-image-viewer teleported v-if="previewVisible" :url-list="previewUrlList" :initial-index="previewIndex"
    @close="previewVisible = false" />
</template>

<script setup>
import { ElUpload, ElIcon } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { inject, ref, onMounted, computed } from 'vue'
import { executeEventHandler } from '@/utils/eventExecutor'
import { useFieldBinding } from '@/utils/useFieldBinding'

const formData = inject('formData')
const widgetList = inject('widgetList')
const formConfig = inject('formConfig')

const props = defineProps({
  config: Object,
  rowIndex: Number,
  parentId: String
})

const { fieldValue } = useFieldBinding(formData, props.config, {
  rowIndex: props.rowIndex,
  parentId: props.parentId
})

const uploadClass = computed(() => {
  const base = (fieldValue.value?.length >= props.config?.attributes?.limit || formConfig.value?.disabled || props.config?.attributes?.disabled)
    ? ['removeUpload']
    : []
  const extra = props.config?.attributes?.cssClass
  if (Array.isArray(extra)) return [...base, ...extra]
  if (typeof extra === 'string') return [...base, extra]
  return base
})

const uploadApi = inject('uploadApi')
const requestHeaders = inject('requestHeaders')

const previewVisible = ref(false)
const previewUrlList = ref([])
const previewIndex = ref(0)

const handleSuccess = (response, file, fileList) => {
  if (fieldValue.value == null || fieldValue.value == '') {
    fieldValue.value = []
  }
  let url = response.data.url || response.data.src || response.url || response.src// 匹配多种后端返回格式
  let name = response.data.name || response.name || file.name
  file.url = url
  fieldValue.value = [...fieldValue.value, { name, url }]
}

const handleRemove = (uploadFile, fileList) => {
  console.log(uploadFile)
  const newList = fieldValue.value.filter(file => file.url !== uploadFile.url)
  fieldValue.value = newList
}

const handlePreview = (file) => {
  previewUrlList.value = [file.url]
  previewVisible.value = true
}

onMounted(() => {
  executeEventHandler(props.config.events?.onMounted,
    { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value }
  )
})

const handleChange = (value) => {
  executeEventHandler(props.config.events?.onChange,
    { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value, value }
  )
}
</script>
<style>
.removeUpload .el-upload--picture-card {
  display: none;
}
</style>